<!-- 发布文章/封面组件 -->
<template>
  <div class="my-cover">
    <!-- 图片按钮(组件使用后上来显示的图片) -->
    <div class="btn_img" @click="openDialog()">
      <img :src="coverImageUrl" />
    </div>

    <!-- 对话框(默认不显示)
    append-to-body为true, 弹出层显示在body之上
    visible 是否显示dialog(弹出层), sync作用子组件可以修改后面变量的值
     -->
    <el-dialog
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="720px">
      <!-- tab切换组件 -->
      <!-- v-model绑定的是name属性的值(默认第一个高亮) -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="素材库" name="image">
                    <!-- 菜单 -->
          <div style="padding-bottom: 20px">
            <el-radio-group  size="mini" v-model="imgType">
              <el-radio-button label="全部"></el-radio-button>
              <el-radio-button label="收藏"></el-radio-button>
            </el-radio-group>
          </div>
          <!-- 素材列表 -->
          <!-- 分栏布局
              :gutter  栅格间隔
              :xs <768px 响应式栅格数或者栅格属性对象
              :sm ≥768px 响应式栅格数或者栅格属性对象
              :md ≥992px 响应式栅格数或者栅格属性对象
              :lg ≥1200px 响应式栅格数或者栅格属性对象
             -->
          <el-row :gutter="10" class="img_list">
            <el-col
              class="img_item"
              :xs="12"
              :sm="6"
              :md="6"
              :lg="4"
              v-for="item in imgList"
              :key="item.id"
              @click.native="selectedFn(item)"
            >
              <!-- 确定图片如何适应容器框fit:cover -->
                  <el-image
                    style="height: 100px"
                    :src="item.url"
                    fit="cover"

                    :class="{selected:selectedImgUrl===item.url}"
                  ></el-image>
            </el-col>
          </el-row>
          <!-- 分页组件 prev上一页, next下一页按钮, pager页码, total分页数 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change='changePage'
            :current-page  = 'reqParams.page'

          >
          </el-pagination>
        </el-tab-pane>

        <!-- 上传图片 -->
        <el-tab-pane label="上传图片" name="upload">
          <!-- action上传的地址 -->
          <!-- name 文件对应的参数字段的名字 这个名字要跟后台对应上 -->
          <el-upload
              class="avatar-uploader"
              action="http://api-toutiao-web.itheima.net/mp/v1_0/user/images"
              :headers="headers"
              name="image"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              >
               <img v-if="imageUrl" :src="imageUrl" class="avatar">
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 因为项目底层都是用webpack打包的assets图片, 转成base64字符串, 所以需要引入使用
// 导入图片模块对象
// 无论src里写的assets里的相对路径, 或者JS通过import引入的图片模块
// src下的统统都是模块文件(包括图片) - 运行的时候, 都会被webpack解析成一个个模块(提取数据)-放入到js中再放入到index.html中执行
import defaultPng from '@/assets/default.png'
// 接口
import { userImageListAPI } from '@/api'
export default {
  name: 'MyCover',
  data () {
    return {
      coverImageUrl: defaultPng, // 确认选择的图片地址
      // 控制对话框显示隐藏
      dialogVisible: false,
      // 当前tabs组件激活的选项卡的name属性的值
      activeName: 'image',
      reqParams: { // 请求素材库的参数对象
        collect: false, // 全局图片false  true 就是收藏的
        page: 1,
        per_page: 8 // 因为前端页面只显示2行4列每页八个
      },
      imgList: [], // 存返回的素材数组的
      imgType: '全部', // 全部/收藏图片标签的文字
      total: 0, // 图片总数
      selectedImgUrl: '', // 选中的图片的url
      headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem('token')
      },
      imageUrl: ''// 图片上传成功的地址
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      // 尽量用后台服务器上的地址 因为上传成功以后图片地址还要给 Articleadd页面
      // this.imageUrl = URL.createObjectURL(file.raw)
      this.imageUrl = res.data.url
      this.getuserImglistFn()
    },
    beforeAvatarUpload (file) { // 文件上传之前 (先判断验证下)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2 // 1Kb = 1024byte  (1byte=8Bit(二进制))
      // 例如 file.size的值 3000000 / 1024 / 1024的值 2.8Mb
      if (!isJPG) {
        this.$message.error('图片只能是 JPG 格式 / PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2Mb!')
      }
      return isJPG && isLt2M // 如果返回true就开始上传, 如果返回false则停止上传
    },
    openDialog () {
      this.dialogVisible = true
      this.selectedImgUrl = this.coverImageUrl
    },
    // 监测分页的页数变化
    changePage (page) {
      // console.log(page)
      // 点击那个页就返回那个页的页码page  将返回的页码赋值给parmas参数 重新进行网络请求
      this.reqParams.page = page
      this.getuserImglistFn()
    },
    // 封装请求--从后台获取的图片数组 因为有多处地方用
    async getuserImglistFn () {
      const [err, res] = await userImageListAPI(this.reqParams)
      if (!err) {
        this.imgList = res.data.data.results
        this.total = res.data.data.total_count
      }
    },
    selectedFn (obj) {
      // el-col
    // 当点击图片容器 判断当前图片是否已经保存的了 取消选择赋予null
    //  点击selecedImgUrl没有值/跟点击的图片的地址不同， 都把最新的图片保存起来  间接影响页面
      if (this.selectedImgUrl === obj.url) {
        this.selectedImgUrl = defaultPng // 没有选择默认给个占位图
      } else {
        this.selectedImgUrl = obj.url
      }
    },
    confirmFn () {
      this.dialogVisible = false // 弹出层消失
      this.coverImageUrl = this.selectedImgUrl // 把选中的图片的url地址 赋予给mycover组件显示的地方
      if (this.coverImageUrl === defaultPng) {
        this.$emit('coverimg', false, this.index)
      } else {
        this.$emit('coverimg', this.coverImageUrl, this.index)
      }
    }
  },
  props: {
    index: Number, // 接收当前组件索引
    value: String // 接收默认图片
  },
  watch: {
    imgType (newVal) { // 全部和收藏的改变
      this.reqParams.collect = !(newVal === '全部')
      this.reqParams.page = 1
      // if (newVal === '全部') {
      //   this.reqParams.collect = false
      // } else {
      //   this.reqParams.collect = true
      // }
      this.getuserImglistFn()
    },
    value: {
      immediate: true,
      handler (newVal) {
        if (newVal !== undefined) {
          this.coverImageUrl = newVal
        }
      }
    }
  },
  created () {
    // 页面一加载就请求后台获取图片
    this.getuserImglistFn()
  }
}
</script>

<style scoped lang='less'>
/* 图片按钮 */
.btn_img {
  width: 150px;
  height: 150px;
  border: 1px dashed #ddd;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
/* 素材列表 */
.img_list {
  margin-top: 15px;
  .img_item {
    width: 150px;
    height: 120px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 15px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
/* 素材列表 */
.img_item {
  position: relative;
}
/* 选中样式 */
.selected::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3) url(../assets/selected.png) no-repeat center /
    50px 50px;
}
//上传图片的样式
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
